<template>
  <div class="loginContainer">
    <h1 :class="mystr">登录</h1>
    <form action="./checkUser.php" onsubmit="return false" method="post">
      姓名：
      <input
        v-model="username"
        class="inputStyle1 inputStyle username"
        type="text"
        name="username"
      />
      <span class="exchange">用户名不正确</span>
      <br />密码：
      <input
        v-model="pwd"
        class="inputStyle pwd"
        type="password"
        name="pwd"
      /><br />
      记住我 <input type="checkbox" class="remeber" />
      <input @click="sub" class="loginStyle" type="submit" value="登录" />
      <button @click="changeCart">点击我修改购物车数据</button>
      <button @click="getsomedata">点击我发送请求</button>
    </form>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      username: "",
      pwd: "",
      mystr:""
    };
  },
  methods: {
    async sub() {
      let { data } = await this.$http({
        url: "/api/checkUser",
        method: "post",
        data: {
          username: this.username,
          pwd: this.pwd,
        },
      });
      // console.log(data);
      let token = data.token;
      localStorage.setItem("token", token);
    },
    async changeCart() {
      // 需要把token携带到服务端，需要把token加入到 请求头部里
      let { data } = await this.$http({
        method: "get",
        url: "/api/getdata",
        // headers: {
        //   Authorization: "Bearer " + localStorage.getItem("token"),
        // },
      });
      console.log(data);
    },
    getsomedata(){
        this.mystr = "animate__animated animate__bounce";
        // XMLHttpRequest
        // 原生ajax请求
        fetch("/api/getfetchdata").then(res=>{
            console.log(res);
            // return res.json();
            // return res.text();
            return res.clone();
        }).then(res=>{
            console.log(res);
            return res.json();
        }).then(res=>{
            console.log(res);
        })
    }
  },
};
</script>

<style scoped>
.loginContainer {
  margin: 0 auto;
  width: 600px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 50px;
  border: 1px solid;
}
.loginContainer input {
  margin-bottom: 20px;
}
.loginStyle {
  width: 160px;
  height: 40px;
  background: rgb(50, 203, 77);
  color: white;
  font-size: 17px;
}
.inputStyle {
  width: 200px;
  height: 30px;
  padding: 5px;
  outline: none;
}

.inputStyle:focus {
  border: 1px solid rgb(50, 203, 77);
}
form {
  position: relative;
}
.exchange {
  position: absolute;
  top: 8px;
  right: 65px;
  color: red;
}
</style>